import React from 'react';
import { storiesOf} from '@kadira/storybook';
import { withKnobs, number } from '@kadira/storybook-addon-knobs';
import BarGraph from './BarGraph';
import daityouganImg from './testimages/colorectal_cancer.png'
import nousotyuuImg from './testimages/cerebral_stroke.png'
import kenkouImg from './testimages/5_health_habit.png'
import igan1Img from './testimages/gastric_cancer1.png'
import igan2Img from './testimages/gastric_cancer2.png'
import shinkinImg from './testimages/cardiac_infarction.png'
/*global module*/

const imgStyle = {
  width: '380px',
  backgroundSize: 'contain',
};

storiesOf('棒グラフ', module)
  .addDecorator(withKnobs)
  .add('大腸がん', () => (
    <div>
      <div>
        <h4>テスト対象</h4>
        <BarGraph
          data={[
            {
              label: '同年代の平均',
              value: 0.5,
            },
            {
              label: 'あなた',
              value: 0.4,
              active: true,
            },
          ]}
        />
      </div>

      <div>
        <h4>参考：国立がんセンター(画像)</h4>
        <img src={daityouganImg} style={imgStyle} />
      </div>
    </div>
  ))
  .add('脳卒中', () => (
    <div>
      <div>
        <h4>テスト対象</h4>
        <BarGraph
          data={[
            {
              label: ['同年代・同性で','危険度が一番高い','グループ'],
              value: 10.3,
            },
            {
              label: 'あなた',
              value: number('あなた', 4.8),
              active: true,
            },
            {
              label: ['同年代・同性で','危険度が一番低い','グループ'],
              value: 0.6,
            },
          ]}
        />
      </div>

      <div>
        <h4>参考：国立がんセンター(画像)</h4>
        <img src={nousotyuuImg} style={imgStyle} />
      </div>
    </div>
  ))
  .add('健康習慣', () => (
    <div>
      <div>
        <h4>テスト対象</h4>
        <BarGraph
          data={[
            {
              label: ['健康週間を実施し','ないグループ'],
              value: 10.8,
              fixedHeight: 120,
            },
            {
              label: 'あなた',
              value: number('あなた', 9.1),
              active: true,
            },
            {
              label: ['健康習慣をすべてを','実施するグループ'],
              value: 5.1,
              fixedHeight: 10,
            },
          ]}
        />
      </div>

      <div>
        <h4>参考：国立がんセンター(画像)</h4>
        <img src={kenkouImg} style={imgStyle} />
      </div>
    </div>
  ))
  .add('胃がん　パターン１', () => (
    <div>
      <div>
        <h4>テスト対象</h4>
        <BarGraph
          labelSize="1em"
          decimalDigit={2}
          data={[
            {
              label: 'A群',
              value: 0.060,
            },
            {
              label: 'B群',
              value: 0.454,
              active: true,
            },
            {
              label: 'C群',
              value: 0.845,
            },
            {
              label: 'D群',
              value: 0.856,
            },
          ]}
        />
      </div>
      <div>
        <h4>参考：国立がんセンター(画像)</h4>
        <img src={igan1Img} style={imgStyle} />
      </div>
    </div>
  ))
  .add('胃がん　パターン２', () => (
    <div>
      <div>
        <h4>テスト対象</h4>
        <BarGraph
          decimalDigit={2}
          data={[
            {
              label: ['他のリスク因子','が最小の場合'],
              value: 0.310,
            },
            {
              label: 'あなた',
              value: number('あなた', 0.554),
              active: true,
            },
            {
              label: ['他のリスク因子','が最大の場合'],
              value: 0.755,
            },
          ]}
        />
      </div>
      <div>
        <h4>参考：国立がんセンター(画像)</h4>
        <img src={igan2Img} style={{backgroundSize:'contain', width:'300px'}} />
      </div>
    </div>
  ))
  .add('心筋梗塞', () => (
    <div>
      <div>
        <h4>テスト対象</h4>
        <BarGraph
          activeColor="#ff70a2"
          inactiveColor="#FFB7D0"
          data={[
            {
              label: ['同年代・同性で','危険度が一番','低い','グループ'],
              value: 0.1,
              fixedHeight: 10,
            },
            {
              label: 'あなた',
              value: number('あなた', 0.1),
              active: true,
            },
            {
              label: ['同年代・同性で','危険度が一番','高い','グループ'],
              value: 13.5,
              fixedHeight: 120,
            },
          ]}
        />
      </div>
      <div>
        <h4>参考：国立がんセンター(画像)</h4>
        <img src={shinkinImg} style={imgStyle} />
      </div>
    </div>
  ))
  ;
